<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 作用域
            全局变量: 在函数外定义的变量
            局部变量: 在函数内定义的变量

        2. 作用域链
            当前作用域 -> 其他作用域(向上)

            注: 可由内而外, 不能由外而内

        3. 块级作用域  ES6
            格式: { 代码块 }

            在块级作用域中, 用 let声明的变量, 只能在块级作用域中使用, 脱离块级作用域则无法使用.
                            用 var声明的变量, 不受块级作用域的影响, 依旧属于全局变量


            在块级作用域外, 用 let声明变量和用 var声明变量基本没区别. 但let不属于window, 而var属于window

        4. 有var 和 没var 声明的区别
            * 函数内,   用var声明的变量, 即为局部变量
              函数内, 没用var声明的变量, 即为全局变量
              建议用var声明变量. 在严格模式下, 不用var

            * delete 可以删除不用var声明的变量
              delete 不可以删除用var, let声明的变量

            
            * 在严格模式下必须用var声明
              注意: 
                "use strict"; 需写在script内的最上面 or 函数内的最上面
    -->

    <script>
        //全局变量
        
        var x = 10;
        function demo1(){
            var y =20 ;
        }
    </script>


    <script>
        
        var x = 10;
        function demo2(){
            var x = 20;
            console.log(x);
        }

        demo2();
        console.log('--------------');


        function demo3(){
            console.log(x);
        }
        demo3();
        console.log('----------------------------');

        function demo4(){
            var y = 30;
        }
        demo4();


        var a = 10;
        function outer(){
            var b = 20;
            function inner(){

                var c = 30;
                console.log(a,b,c);
                console.log(this.a);//this 相当于window  a
            }

            inner();
            console.log(a,b);
        }

        outer();
        console.log(a);
        console.log('------------------');
    </script>

    <script>
        
        var y = 20;
        {
            var x =10;
            console.log(x,y);
        }
        console.log(x);


        let m = 30;
        {
            let n = 40;
            console.log(m, n);
        }

        var a = 10 ;
        let b = 20;
        console.log(window.a);
        console.log(window.b);
        console.log('---------------------');
    </script>

    <script>
        function demo5(){
            var x5 = 10;
            y5 = 20;

            console.log('局部环境中输出x5 = ' + x5);
            console.log('局部环境中输出y5 = ' + y5);
        }

        demo5();
        console.log('全局环境中输出y5 = ' + y5);
        console.log('-----------------');

        var x6 = 10;
        y6 = 20;
        let z6 = 30;

        delete y6;
    </script>
</body>
</html>